feat: removing bootstrap from the project and improvements for displa…

…ying the info

.storybook/preview.tsx

@@ -62,14 +62,16 @@ const preview: Preview = {
   parameters: {
     docs: {
       theme: preferTheme === 'dark' ? customDarkTheme : customLightTheme,
-      container: ({ context, children }) => (
-        // Theme for the doc
-        <div className="dali-wrapper dali-wrapper--default">
-          <DocsContainer context={context}>
-            <ThemeProvider theme={light}>{children}</ThemeProvider>
-          </DocsContainer>
-        </div>
-      ),
+      container: ({ context, children }) => {
+        return (
+          // Theme for the doc
+          <div className="dali-wrapper dali-wrapper--default">
+            <DocsContainer context={context}>
+              <ThemeProvider theme={light}>{children}</ThemeProvider>
+            </DocsContainer>
+          </div>
+        );
+      },
       components: createCustomComponents([
         'div',
         'h1',

.storybook/scss/base/_typography.scss

@@ -1,5 +1,6 @@
+@use '../utils/variables' as v;
+
 // ---------------------- TYPOGRAPHY - BASE ---------------------- //
-@use '../utils/variables' as *;
 
 @font-face {
   font-family: 'Poppins';
@@ -59,8 +60,8 @@
 $doc-base-class-name: sbdocs;
 
 #storybook-docs {
-  font-size: $font-size-base;
-  line-height: $line-height-base;
+  font-size: v.$font-size-base;
+  line-height: v.$line-height-base;
 
   .sb-unstyled {
     ul, ol {
@@ -92,12 +93,15 @@ $doc-base-class-name: sbdocs;
         line-height: 2.8rem;
       }
 
-      &-p {
-        margin: 2.4rem 0;
+      &-p,
+      &-ul,
+      &-ol {
+        margin-top: 0;
+        margin-bottom: 0;
       }
 
       &-li {
-        font-size: $font-size-base;
+        font-size: v.$font-size-base;
         line-height: 2.8rem;
       }
 
@@ -120,8 +124,8 @@ $doc-base-class-name: sbdocs;
 
       &-h2 {
         border: none;
-        margin-top: 8.2rem;
-        font-size: 2.8rem;
+        margin-top: v.$spacing-xxl;
+        font-size: 2.4rem;
 
         + #{$parent}-h3 {
           margin-top: 1.8rem;
@@ -130,7 +134,7 @@ $doc-base-class-name: sbdocs;
 
       &-h3 {
         margin-top: 3.2rem;
-        font-size: 2.4rem;
+        font-size: 2rem;
 
         + #{$parent}-h4 {
           font-size: 1.6rem;
@@ -140,17 +144,17 @@ $doc-base-class-name: sbdocs;
 
       &-h4 {
         margin-top: 2.8rem;
-        font-size: 2rem;
+        font-size: 1.8rem;
       }
 
       &-h5 {
         margin-top: 2rem;
-        font-size: 1.8rem;
+        font-size: 1.6rem;
       }
 
       &-h6 {
         margin-top: 1.6rem;
-        font-size: 1.6rem;
+        font-size: 1.4rem;
       }
 
       em {
@@ -183,22 +187,22 @@ $doc-base-class-name: sbdocs;
         font-size: 1em;
       }
 
-      &-ul,
-      &-ul:first-of-type,
-      &-ul:last-child {
-        margin: 2.4rem 0;
-      }
-
       &-ul .#{$doc-base-class-name}-li + .#{$doc-base-class-name}-li {
         margin-top: 0.8rem;
       }
 
       &-a {
         font-weight: 600;
-        color: $link-color;
+        color: v.$link-color;
       }
     }
 
+    * + .#{$doc-base-class-name}-p,
+    * + .#{$doc-base-class-name}-ul,
+    * + .#{$doc-base-class-name}-ol {
+      margin-top: v.$spacing-md;
+    }
+
     code,
     pre {
       font-family: 'Mono Font', monospace;

.storybook/scss/components/_example.scss

@@ -4,7 +4,11 @@
 
 .example {
   $parent: &;
-  margin-bottom: $spacing-md;
+  margin-bottom: 0;
+
+  * + & {
+    margin-top: $spacing-md;
+  }
 
   &__box {
     position: relative;

.storybook/scss/components/_table.scss

@@ -32,6 +32,7 @@
     padding: 1rem 1.6rem;
     font-size: var(--dds-font-size-sm);
     line-height: var(--dds-line-height-sm);
+    vertical-align: top;
 
     code {
       font-size: var(--dds-font-size-xs);

.storybook/scss/layout/_content.scss

@@ -1,3 +1,5 @@
+@use "../utils/variables" as v;
+
 // ---------------------- CONTENT - LAYOUT ---------------------- //
 
 .dali-wrapper {
@@ -29,3 +31,33 @@
   }
 }
 
+// FLUID - COLS
+
+.row {
+  margin-top: 2.4rem !important;
+}
+
+@media only screen and (max-width: v.$responsive-breakpoint-sm) {
+  .col + .col {
+    margin-top: 16px;
+  }
+}
+
+@media only screen and (max-width: v.$responsive-breakpoint-md) {
+  .col + [class*="col-md"]:not([class*="col-sm"]) {
+    margin-top: 16px;
+  }
+}
+
+@media only screen and (max-width: v.$responsive-breakpoint-lg) {
+  .col + [class*="col-lg"]:not([class*="col-md"]) {
+    margin-top: 16px;
+  }
+}
+
+// TOC: HIDE TABLE OF CONTENTS WHEN IT'S EMPTY
+
+div:has(.toc-wrapper:empty) > p {
+  display: none;
+}
+

.storybook/scss/utils/variables/_variables.scss

@@ -30,6 +30,12 @@ $spacing-size-map: (
   xxxxl: $spacing-xxxxl,
 );
 
+// RESPONSIVE - BREAKPOINTS ------------------------------------ //
+
+$responsive-breakpoint-sm: 576px;
+$responsive-breakpoint-md: 768px;
+$responsive-breakpoint-lg: 992px;
+
 // TEXT - VARIABLES ------------------------------------ //
 
 $font-size-base: 1.6rem;

blocks/ColorInfo/ColorInfo.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { useTheme } from 'styled-components';
+
+import { HFlex, Typography } from '@devoinc/genesys-ui';
+
+type Props = {
+  property: string;
+  concept: string;
+  scale: string;
+};
+
+export const ColorInfo: React.FC<Props> = ({ property, scale, concept }) => {
+  const theme = useTheme();
+  const evalColor = theme.alias.color[property][concept][scale];
+  return (
+    <HFlex>
+      <div
+        style={{ backgroundColor: evalColor, height: '48px', width: '48px' }}
+      />
+      <Typography.Caption>{evalColor}</Typography.Caption>
+    </HFlex>
+  );
+};

blocks/ColorInfo/index.ts

@@ -0,0 +1 @@
+export * from './ColorInfo';

blocks/ComponentBanners/ComponentBanners.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { CardReact } from '../CardReact';
 import { CardHtml } from '../CardHtml';
+import { Col, Row } from '../Fluid';
 
 export interface ComponentBannersProps {
   urlReact: string;
@@ -11,16 +12,16 @@ export const ComponentBanners: React.FC<ComponentBannersProps> = ({
   urlReact,
   urlHtml,
 }) => (
-  <section className="mrow">
+  <Row>
     {urlReact && (
-      <div className="mcol-12 mcol-sm-6">
+      <Col sm={6}>
         <CardReact url={urlReact} />
-      </div>
+      </Col>
     )}
     {urlHtml && (
-      <div className="mcol-12 mcol-sm-6">
+      <Col sm={6}>
         <CardHtml url={urlHtml} />
-      </div>
+      </Col>
     )}
-  </section>
+  </Row>
 );

blocks/Fluid/Col.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { Col as UICol, ColProps } from '@devoinc/genesys-ui';
+import { getEvalClassName } from './utils';
+
+export interface DSColProps
+  extends Omit<ColProps, 'xs' | 'xl' | 'xxl' | 'xxxl'> {}
+
+export const Col: React.FC<DSColProps> = ({
+  className,
+  sm,
+  md,
+  lg,
+  ...props
+}) => {
+  return (
+    <UICol
+      {...props}
+      sm={sm}
+      md={md}
+      lg={lg}
+      className={className || getEvalClassName({ sm, md, lg })}
+    />
+  );
+};

blocks/Fluid/Row.tsx

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { Row as UIRow, RowProps } from '@devoinc/genesys-ui';
+
+export const Row: React.FC<RowProps> = ({ className = 'row', ...props }) => {
+  return <UIRow {...props} className={className} />;
+};

blocks/Fluid/index.ts

@@ -0,0 +1,2 @@
+export * from './Row';
+export * from './Col';

blocks/Fluid/utils.ts

@@ -0,0 +1,18 @@
+import { ColProps } from '@devoinc/genesys-ui';
+
+export const getEvalClassName = ({
+  sm,
+  md,
+  lg,
+}: {
+  sm: ColProps['sm'];
+  md: ColProps['md'];
+  lg: ColProps['lg'];
+}) => {
+  return ''.concat(
+    'col',
+    sm ? ` col-sm-${sm}` : '',
+    md ? ` col-md-${md}` : '',
+    lg ? ` col-lg-${lg}` : '',
+  );
+};

blocks/index.ts

@@ -3,9 +3,12 @@ export * from './CardFigma';
 export * from './CardHtml';
 export * from './CardReact';
 export * from './ClassesTable';
+export * from './ColorInfo';
 export * from './ComponentBanners';
 export * from './DesignTokensList';
 export * from './DocsContainer';
 export * from './Figma';
+export * from './Fluid';
 export * from './Figure';
 export * from './LiveDemo';
+export * from './Fluid';