From 68886172342a51b4a2322481a46554729e14f699 Mon Sep 17 00:00:00 2001 From: Enrique Moreno Date: Tue, 11 Feb 2025 15:10:13 +0100 Subject: [PATCH 1/4] Reimplementation of the Divider component with new CSS variables --- packages/lib/src/divider/Divider.tsx | 37 ++++++++++++++-------------- 1 file changed, 18 insertions(+), 19 deletions(-) diff --git a/packages/lib/src/divider/Divider.tsx b/packages/lib/src/divider/Divider.tsx index 9f8780390f..4b1abc4e9c 100644 --- a/packages/lib/src/divider/Divider.tsx +++ b/packages/lib/src/divider/Divider.tsx @@ -1,30 +1,14 @@ import styled from "styled-components"; -import CoreTokens from "../common/coreTokens"; import DividerPropsType from "./types"; -const DxcDivider = ({ - orientation = "horizontal", - weight = "regular", - color = "mediumGrey", - decorative = true, -}: DividerPropsType): JSX.Element => ( - -); - const StyledDivider = styled.hr` ${({ orientation, weight, color }) => ` border-color: ${ color === "lightGrey" - ? CoreTokens.color_grey_200 + ? "var(--border-color-neutral-lighter)" : color === "mediumGrey" - ? CoreTokens.color_grey_400 - : CoreTokens.color_grey_700 + ? "var(--border-color-neutral-medium)" + : "var(--border-color-neutral-strongest)" }; ${orientation === "horizontal" ? "width" : "min-height"}: 100%; ${orientation === "horizontal" ? "height" : "width"}: 0px; @@ -37,4 +21,19 @@ const StyledDivider = styled.hr` `} `; +const DxcDivider = ({ + orientation = "horizontal", + weight = "regular", + color = "mediumGrey", + decorative = true, +}: DividerPropsType): JSX.Element => ( + +); + export default DxcDivider; From 5d3d0464eac0e501f5b71d67a3ff486cc27e350a Mon Sep 17 00:00:00 2001 From: Enrique Moreno Date: Tue, 18 Feb 2025 15:26:03 +0100 Subject: [PATCH 2/4] Added documentation with the new structure --- .../website/pages/components/divider/code.tsx | 19 +++ .../pages/components/divider/index.tsx | 8 +- .../components/divider/specifications.tsx | 21 --- .../pages/components/divider/usage.tsx | 21 --- .../components/divider/DividerPageLayout.tsx | 7 +- .../divider/code/DividerCodePage.tsx | 40 +++--- .../divider/overview/DividerOverviewPage.tsx | 122 ++++++++++++++++++ .../overview/images/divider_anatomy.png | Bin 0 -> 8240 bytes .../divider/overview/images/divider_color.png | Bin 0 -> 10956 bytes .../overview/images/divider_orientation.png | Bin 0 -> 11757 bytes .../overview/images/divider_weight.png | Bin 0 -> 10446 bytes .../divider/specs/DividerSpecsPage.tsx | 49 ------- .../divider/specs/images/divider_colors.png | Bin 7097 -> 0 bytes .../specs/images/divider_orientation.png | Bin 3431 -> 0 bytes .../divider/specs/images/divider_weight.png | Bin 3495 -> 0 bytes .../divider/usage/DividerUsagePage.tsx | 37 ------ 16 files changed, 167 insertions(+), 157 deletions(-) create mode 100644 apps/website/pages/components/divider/code.tsx delete mode 100644 apps/website/pages/components/divider/specifications.tsx delete mode 100644 apps/website/pages/components/divider/usage.tsx create mode 100644 apps/website/screens/components/divider/overview/DividerOverviewPage.tsx create mode 100644 apps/website/screens/components/divider/overview/images/divider_anatomy.png create mode 100644 apps/website/screens/components/divider/overview/images/divider_color.png create mode 100644 apps/website/screens/components/divider/overview/images/divider_orientation.png create mode 100644 apps/website/screens/components/divider/overview/images/divider_weight.png delete mode 100644 apps/website/screens/components/divider/specs/DividerSpecsPage.tsx delete mode 100644 apps/website/screens/components/divider/specs/images/divider_colors.png delete mode 100644 apps/website/screens/components/divider/specs/images/divider_orientation.png delete mode 100644 apps/website/screens/components/divider/specs/images/divider_weight.png delete mode 100644 apps/website/screens/components/divider/usage/DividerUsagePage.tsx diff --git a/apps/website/pages/components/divider/code.tsx b/apps/website/pages/components/divider/code.tsx new file mode 100644 index 0000000000..f0352fdc7d --- /dev/null +++ b/apps/website/pages/components/divider/code.tsx @@ -0,0 +1,19 @@ +import Head from "next/head"; +import type { ReactElement } from "react"; +import DividerPageLayout from "screens/components/divider/DividerPageLayout"; +import DividerCodePage from "screens/components/divider/code/DividerCodePage"; + +const Code = () => { + return ( + <> + + Divider Code — Halstack Design System + + + + ); +}; + +Code.getLayout = (page: ReactElement) => {page}; + +export default Code; diff --git a/apps/website/pages/components/divider/index.tsx b/apps/website/pages/components/divider/index.tsx index 66ccec307b..b0aa521886 100644 --- a/apps/website/pages/components/divider/index.tsx +++ b/apps/website/pages/components/divider/index.tsx @@ -1,6 +1,6 @@ import Head from "next/head"; import type { ReactElement } from "react"; -import DividerCodePage from "screens/components/divider/code/DividerCodePage"; +import DividerOverviewPage from "screens/components/divider/overview/DividerOverviewPage"; import DividerPageLayout from "screens/components/divider/DividerPageLayout"; const Index = () => { @@ -9,13 +9,11 @@ const Index = () => { Divider — Halstack Design System - + ); }; -Index.getLayout = function getLayout(page: ReactElement) { - return {page}; -}; +Index.getLayout = (page: ReactElement) => {page}; export default Index; diff --git a/apps/website/pages/components/divider/specifications.tsx b/apps/website/pages/components/divider/specifications.tsx deleted file mode 100644 index 08601fc920..0000000000 --- a/apps/website/pages/components/divider/specifications.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import Head from "next/head"; -import type { ReactElement } from "react"; -import DividerPageLayout from "screens/components/divider/DividerPageLayout"; -import DividerSpecsPage from "screens/components/divider/specs/DividerSpecsPage"; - -const Specifications = () => { - return ( - <> - - Divider Specs — Halstack Design System - - - - ); -}; - -Specifications.getLayout = function getLayout(page: ReactElement) { - return {page}; -}; - -export default Specifications; diff --git a/apps/website/pages/components/divider/usage.tsx b/apps/website/pages/components/divider/usage.tsx deleted file mode 100644 index a28c17d2d0..0000000000 --- a/apps/website/pages/components/divider/usage.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import Head from "next/head"; -import type { ReactElement } from "react"; -import DividerPageLayout from "screens/components/divider/DividerPageLayout"; -import DividerUsagePage from "screens/components/divider/usage/DividerUsagePage"; - -const Usage = () => { - return ( - <> - - Divider Usage — Halstack Design System - - - - ); -}; - -Usage.getLayout = function getLayout(page: ReactElement) { - return {page}; -}; - -export default Usage; diff --git a/apps/website/screens/components/divider/DividerPageLayout.tsx b/apps/website/screens/components/divider/DividerPageLayout.tsx index a51ed8d4ec..e1138eee11 100644 --- a/apps/website/screens/components/divider/DividerPageLayout.tsx +++ b/apps/website/screens/components/divider/DividerPageLayout.tsx @@ -6,9 +6,8 @@ import { ReactNode } from "react"; const DividerPageHeading = ({ children }: { children: ReactNode }) => { const tabs = [ - { label: "Code", path: "/components/divider" }, - { label: "Usage", path: "/components/divider/usage" }, - { label: "Specifications", path: "/components/divider/specifications" }, + { label: "Overview", path: "/components/divider" }, + { label: "Code", path: "/components/divider/code" }, ]; return ( @@ -19,7 +18,7 @@ const DividerPageHeading = ({ children }: { children: ReactNode }) => { A divider is a thin line that visually separates groups of content within a specific area of an application. - + {children} diff --git a/apps/website/screens/components/divider/code/DividerCodePage.tsx b/apps/website/screens/components/divider/code/DividerCodePage.tsx index 587b845e45..389f4860d9 100644 --- a/apps/website/screens/components/divider/code/DividerCodePage.tsx +++ b/apps/website/screens/components/divider/code/DividerCodePage.tsx @@ -22,46 +22,46 @@ const sections = [ - orientation + color - 'horizontal' | 'vertical' + 'lightGrey' | 'mediumGrey' | 'darkGrey' - The divider can be showed in horizontal or vertical. + Modifies the color of the divider. - 'horizontal' + 'mediumGrey' - weight + decorative - 'regular' | 'strong' + boolean - Modifies the thickness of the divider. - 'regular' + Specifies whether the divider serves a purely decorative purpose or functions as a semantic separator for + content. Additionally, it determines whether the divider is accessible to screen readers. + + + true - color + orientation - 'lightGrey' | 'mediumGrey' | 'darkGrey' + 'horizontal' | 'vertical' - Modifies the color of the divider. + The divider can be showed in horizontal or vertical. - 'mediumGrey' + 'horizontal' - decorative - - boolean - + weight - Specifies whether the divider serves a purely decorative purpose or functions as a semantic separator for - content. Additionally, it determines whether the divider is accessible to screen readers. + 'regular' | 'strong' + Modifies the thickness of the divider. - true + 'regular' @@ -87,7 +87,7 @@ const DividerCodePage = () => { return ( - + diff --git a/apps/website/screens/components/divider/overview/DividerOverviewPage.tsx b/apps/website/screens/components/divider/overview/DividerOverviewPage.tsx new file mode 100644 index 0000000000..5725042be0 --- /dev/null +++ b/apps/website/screens/components/divider/overview/DividerOverviewPage.tsx @@ -0,0 +1,122 @@ +import { DxcBulletedList, DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react"; +import DocFooter from "@/common/DocFooter"; +import QuickNavContainer from "@/common/QuickNavContainer"; +import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; +import Image from "@/common/Image"; +import anatomy from "./images/divider_anatomy.png"; +import weight from "./images/divider_weight.png"; +import color from "./images/divider_color.png"; +import orientation from "./images/divider_orientation.png"; + +const sections = [ + { + title: "Introduction", + content: ( + + The divider component is a simple yet effective element for visually separating content within an interface. It + helps improve readability and organization by creating clear distinctions between sections or groups of + information. Our divider also has different weights and colors, allowing it to structure different layouts, + enhance hierarchy, and guide users through content seamlessly without adding visual clutter. + + ), + }, + { + title: "Anatomy", + content: ( + <> + Divider's anatomy + + + Divider: a thin, horizontal or vertical rule that visually separates content sections. + + + + ), + }, + { + title: "Configuring a divider", + content: ( + <> + + Depending on the context in which it is used, the divider can have different weights, colors, and orientations + to better suit the content it separates. + + + ), + subSections: [ + { + title: "Weight", + content: ( + <> + Divider's weight + + + Regular (1px of weight): ideal for subtle divisions within the same section, + maintaining a clean structure without being intrusive. It is used in layouts with related content or in + lists where a light separation is needed. + + + Divider (2px of weight): useful for creating a more noticeable separation between + sections or distinct content groups, reinforcing visual organization. It can be applied to significant + context changes within a page or as a separator for grouped information headers. + + + + ), + }, + { + title: "Color", + content: ( + <> + Divider's color + + + Light: best suited for dark backgrounds, providing a subtle yet clear separation + without overwhelming the interface. + + + Medium: a balanced option that works well in most cases, offering a neutral and + adaptable separation that maintains readability. + + + Dark: ideal for light backgrounds or when a stronger visual distinction is needed to + emphasize section breaks. + + + + ), + }, + { + title: "Orientation", + content: ( + <> + Divider's orientation + + + Horizontal: used to separate sections within a page, creating clear distinctions + between content blocks, lists, or form fields. It helps establish a visual flow and hierarchy. + + + Vertical: useful for dividing content side by side, such as in multi-column layouts, + toolbars, or menus. It helps guide the user's eye and structure information efficiently. + + + + ), + }, + ], + }, +]; + +const DividerOverviewPage = () => { + return ( + + + + + + + ); +}; + +export default DividerOverviewPage; diff --git a/apps/website/screens/components/divider/overview/images/divider_anatomy.png b/apps/website/screens/components/divider/overview/images/divider_anatomy.png new file mode 100644 index 0000000000000000000000000000000000000000..22bc64977ef92f82243aba3e10af4566ef83b85e GIT binary patch literal 8240 zcmeHMYgAKL7Cu4b6?t|lSR+`gty8*$N-gpT5r&pBB3RqSV*wJOKy49Aqd={NIk8>ybN~^noNwQ|Z$8}{8|CcuoD%@RIr^>0eE`^V0I(Tyu!EYszZ^OTzZ^e$D~SQX+AZiq zir%+*9x6$UeNhoWJV;T)AGX=yd%^)|5s*y>Rs-O3GdeQ--9nN^9(Q6Ulhmh+I=%V8 z%=BP%c17q|TiLqCMlaj5PVQNI-5kqy+rE9r<6Y6lV=m_Mu{wvBA8)pO_TmtYxAFVW z&;Fw#U+!WzH+E^9s`=!~;J=@Qd=q}!(`?C7>Ax5ye@ z5{nXCts~%JOSg_V4kRz@Xk!FGsX;m6#vxfpn+P)k5aNVjG7wzAFc8H7!$4F^3O{)R4;L}8U!JO7x=XN^e6Mi zEquUvbbiLAiqj>xK7ToPt^@M+7L6h~*Iy^~6X9cND9 zjj1L^N?6a4wMfZ%8Fq4sm-|*sCh>``gqZB};)}SU+v>p~aVnB%1$ia9FQ<6&tRik9 zOWBRqfXnV^u483FP)YVneNH-Xq&|+dQnd=r)x8ND!nNr|9~Q8bim|5HTI#h1aXoff zT@KcOA9KH5X0B5_EbpRr_c8fz8W^0*ob@&ulRSot>`G#hWfBwXL$ z?Sxy-t?1fGRF>*yOH3o~I5{3Lh3er=84t^b&o(u8P|c(FPmW*@&G+HP`=3!S&%Bcz z*gF|7mgbutwEB1zP*NtAEniJ78J3ic*^F&*wFcveN8xf1Ue*7j4RkoLNz5)a?rBga zq?yOq3hl*Ei)ISvA-mEFbIf8qtYD6I3EPcrI)m$m@pGATYPF`o1-al{$|AvxRF9WS zNK3vx#rmZm%-Ua0cCnfFe3T)AQ0iK>#=y3kW@aPPEc0ZE`(k&0Rhz}EQ{Lh?hnb8z zgOOkPMldUAd(ZZrY>Nqkn+YX_!J`e^fQ9+w)xiJ4B9EN0?Y2UH=l)jXER9NQ>#3+p zTPIob1ygmN1a|e`>*4k-j;7H7P)$3%59p(J#Y-U_^FLq0&ALSM3dGRzNEKJgmc=qH zT%k9LfBwxRcobWcI_B`0CxXl! ztLaF^v8JTz-NL`jb!l`-w9`*AZsD2Hbd1Z;p8oZ3yKd8sWA9@4=72Lk$(l&+z4EQ{ z-1?^=KZCT5DFu((l}-Jg`$V(C(fEY_m`mEwalf}E$Gd%Y1iRV05yc!_6jUF(dpc9G zoQvz(9gMkX7<&Md=i_=0>8OPv^q)(#TJG>jv1M1oHd8u?fr9-m`i_L~OmF z(Eg-+o_QPlb+(E4Ej`5xFV?R#KxMonT(&jA&pqbA$!z+;&PlveXes@)x9FyHKQyYk1 zw{SKgVz#TBJrNqAwG5=2Xeu^tK@8g8tw%A-Np~D9l-2w;u{aB65UQ;*Yo32}=)T)O1qHMOsm_Z+*M;H&r0-+J?jp5Ix@C z0-N~K!^Ni_kkK0dKVKeIHsG=db&jwQVA*vXMuo)QNf2{Qx)0SG=0#0kML z5R}0%0HQcx9EjpT6bFI}){;PQf#3qch5wQZrUq)rXQ*-T`t>kN(EOSWURUiVv#tlv zz@8ZkJ>rii^B4!ZRmE|HT^|y literal 0 HcmV?d00001 diff --git a/apps/website/screens/components/divider/overview/images/divider_color.png b/apps/website/screens/components/divider/overview/images/divider_color.png new file mode 100644 index 0000000000000000000000000000000000000000..0445c7ff05d3cb24851037e27889eb0d32943508 GIT binary patch literal 10956 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 OazEsC5Whd<^1lHft(DaP literal 0 HcmV?d00001 diff --git a/apps/website/screens/components/divider/overview/images/divider_orientation.png b/apps/website/screens/components/divider/overview/images/divider_orientation.png new file mode 100644 index 0000000000000000000000000000000000000000..245a3bd95c4fb21f63485e000267f3436c416f70 GIT binary patch literal 11757 zcmeHNc~Fzdw(kHU3L?s|$f|Q4m=Oik37`m321Zdp1!W7Hf<_5T03pa0bR2ORU}jK2 zKygQe1X+@>Crp%#ir^B65JFf)Fd+$xAwWoSzrf79_tv|0|9JK4O}#3*ilWoqoUgyb z>EHSNPWtj8kG-o_8mt5Wta9Dw>^0)%#>PtXSy)E@Ue090nH&mUU`z?So_&U=m|!p7JR7-JtceIo8Fzg!)& zhx=A9i`wAAeSQDOFKSm=hmu{_l(=8X|20hYo!Rz{H6ClY-ySMai;984zsUbhrD?`- z&Y~l{%kYzc3$I6{I&Lp;p6*PYYU}KtV#g(rnwlJe_(zjb>sz==zkC_x{FE=?yH*$Fa!gUQk*yei$Lw>Z&`ud$UZ`9cxc|O;8>u1ur;&5j{bKqj$U^&h z=zUhg^!14i?*LG%Z0M{#{_m#Y*hmAAu1}P1^tlRcLU&$f=KyWOZyb8DC8(kLa2E%0%mF zME6j8XlS1qP`>9~!FTD;R0Y&uk*s{8&fas-gx0G&2e|QGDe&CFZs|H`a?r11xtq84MP_h5QDlgZbht@IHQ*gsrvV6X zs=nUk%@k|Sb)h7ApP|KopbFEsBNezc${b$qRSW=NX^7mtL`WBX@xRT!y9}t8a8h3I zDv)ku)%4j@;pc6NfWY>hErEfbhgRcezFQdVR)Uy@qWzO(_)YgU^=qVx(!%)W8c4UVteOKF-~wUS^=^b0?Maofi?d7F7G84XxVCRaCPc zc+0v_^fo~U)w$hvAxdl4>tF~JYc$W+pOv&Tx+4LZOnL`yZAYGtjF%SjGMKuPfc^(> z33zhFo=HLNFa?A+o*a ziWd&Tp8gkF>F1t*oa!RU?KzTg=={faBv591W;u<4toQ0IwkIRaR3IPj-jyMzZq&h1 z(!P`_fz9{$72?)d`3+VRB$@#MD99<~^_6QO2=dAt4tHA)4Tou`pF2$SeEK37q!0U8 zoWqhAfXNLasgVvuPZhBKS$l4!F|=}{Vr7Fp6!BUONQKMQ6lnL6AXNui_bi19jQp_n zFNx$!#03>e{jrA~6^TOkC6N6K5oplir_cu$c1#;od8qje3b%VGW_a!oD2}@@79H zfo$-PWA-XgqGzW}yt#|2zf>Fe&$R*SqZxjQ5_}slsA)1mRt(2m_h0Z{4Pir~eZlwwU>8CWM=UlsNQ3So^;K|eQ&E)28 z$V56u$=dpPL|0Gi)$JDNU?BGpejZ=h3xSrxen*mHNL7J#qwKeGJm*v-?^B}#E0W*s zp-`p;_!?4uGxjyvkwv+$IA$2Q8kJhv88#>q`Z+G*KBoKqzex>$c{K^Wsy{!0jAV5e zklFaIj|%_gy?(*%WA?4#5MTKrW4Kn(`vk0mT+^M>*E5Y9NmgXR1A=aWZLqz(kc>7= z-Z0Zz{^~*qwC>W#xM}|VK_TZ}LKIgA$^|2;~88vD31 zAX8E8OOJp|KlZ-jJF5mL3MJ497zGR_i#nOaVYG z3fFYRurj0%M*)Rt<-i~2A(1pO*tS2U-#2_XIyIqfOs3)XA!Yl* zQ`J3TBXjE2q_lfPe96>w1eu6}Xwr@a#Y?G6ON`vG8e_DGo781xwQW1jtE0@4!qxI48W4qQt*9f9rq*BMC0 zyBkFQ6HjQ2g^H~2CMC)sq)xvcmQxE~Qe zR(IJ175VJ|;K_yXVeic0lL^AcD#$|4xWdAY9df<=a?P3lE_fgTaMA*gC*b0w%pN6u z=r6vRmqF#^v}!(|e|AAB0TA-(-^t3QZ1z8wAJ7*JfatqI#?(eZuwMJBU&qj z*+YFz$p_+ovVM3x+}QpMeT}ej3Sy%BPN<&(YF=Aw%-}Cl98>RQ_XL$o>I7+)7A;~! zHpM5hCBpC|02jHj##lk`j+thqaVy;H%jXDr2}1fQq|LAF5N3!)ybrcJ+ zrv`_}bHRV$w?1VjJl|WY-{&%z6g)@&0)W#HCWL%y6!#_bi{yE z#vHRRN!00M?yl9@afUhg*!4l$YrGBte#a~OFir;jV@>7*9ZuqS^#h@+%#kq`YFAsHv=&$3Zn^&~#cvjadcnxhBE16jv(@V-Vl!Rot$F4SW{-YmxC1~Obm?(urpJk z+_Td{ikCJV3J1ShcC33}%I7zG)y;81$$TQ@MSNNDuCrC+X*_u9bT^7q@Wo^CLwS$A zBH+n_p{rKSiBVPfpaXb=pwH1=4%5p`Q$h~x0_p3c8z)*@Y8x0fudfo$+4n}Cd=rV2 zOE|*py?VxaMm8iqA}?weG7noye_V;qydw#nyHWx_Sy72GzN$fg3imMKW?ycQj2Xpi z9O4ogJOe{}X8!B|Eu%x~C!TNh*nczD2nH~o(D?ybcry=O_sMIPw@hr-#N`XxW(J%O z&RUweaAzAQUs&8@_TVX$cwX0sEjQ5T%YugPN*uVUk6a(+1WCvO^cbf+d2HpV7g<#W z^iLWRE*Kl~L}Xl0&0C_=2rHW6kQ8uei2KdZa7FVRw||;eiTUw^VC%u1X1DGJy}UMb zGj{6Zt7xfT6PCS+=fbrS+0nb})Ii84sK%Ebx{k0LfBC-uFw6b-BX<0Q0*2qz1MlmW zo(N_!_(b}O;CfxqT$04YlXX4rGo}m))&ky_r{s=YoA`@3_w;zArI?eE6wDR2l48qN zR87k(DhTv0cG^sHXDFvB8H?+58bKi>-Lk1itZ8$8{Ya;6iaYVQ+s)h^OdPM0XTx?5 zaY&F)@I=1LG{Dby46CuBQ&Cq(Xuk%R z=({S*r)2$YQwUZVof<40I&AR^40!AZs_7xbPK>*?+t%UDa|O3Y%`*49KRR;T$fJgl z5H8gz7j1{HsXA3vl00AVbt$VW?8RN)uUoc}ZU*9<%A)LhAJ&^iTqKwBN9V$SeHg`T zqQG5`=D0{hlCRzCBPYEg_S|_#`G_f9j|>(W%;f~aOKVP*@jYB->M1k=%^TN6$;C)< z4$bHs7zlf`H59iwIA;3ExG%GpUzVel@z6+*F;g`dW82Ip9Su5j{FGjhp0W0sp}v9q zT6J2<;m`q@>n~SH6$F;a^oS@0jT}v~%rNd?6f=|Gx(Ip-kWgi(y#QiwE#aO6Pk6Lj zjPd48pG|b*(Rc3?P@R<4uJ>UFOU$y`Ep~P}AH^NuCf%YvLC)m_?PWh?@Pwp93-;sw z%F88+cVV+Pu|4H!Qjp>wDnz>%hz_bKu9d`|*;A#S4Hp=yQ$^b|GLa2BPj4EGn8KU! z+WHNLkTLNuw(ik8WYvQy`FjlmT2~)TO$`o2r+z+ll zwz}kOr9ChB<_^iEL7n2&9)ajskt-vTUK}p_;v$SpdV%~foEMxXkU(cEe1LC7yV5g< zeYAqo^JSxHKHY2xVnI=%tlg{0I0Aaw`GoZD%XW>55+tHw^sTj?PGCm;(Dimq z5pFHKS>SP(PeFy!A%R))6;R&&MBpFb#kl|KF8{8DuBI@#&3Za(S^t#(IsY6FDbqV= zf4oB_O{1gPlyxO?riku6mX?QX=%mCfn;qC_1c1+XkSRBHDP zVYpAh!1JHYQ%%^!EQ=asw>n7ifl}If|7G1Qa&kTPX_>tYf|-rn>bl?PdF!`WUQn_D}p~6@c-F$Sx+z zlD19=uY;f9jf9CzKGUMycc#uy&?T(HVslcs(i5|C0DeEp+Aa1OOIUD`Ny8WWOIok3 zHg$~fO3kw$+`KI%h`y?ZeYr#$db{3cvM{=N7XNaxw<+025wzE#pmp2Us}%WS|C?i= zd34+#S&=&TNs+~$db|I&IktDp%?u&!MB(elxF2N6hbn|GttgE(+R!DbqKcIyosGN? zl(&(}?7%V-gUfLldM2}Z8_N6~s7qtoCm2~X@DBxyWMA_@C6J=$Z2(a%>2@aCDeTQk z&YUF5vy|cd&gC&(SP}7Pe6}xHm?`TWADbW8f9cLKaI4;P@UBL2@UroHW>Y2(Net*k znWj@+`KkI=^wt__aYg8PSuM`5bHWK%6fiV8G_$QIk&8WG-VU;VE)7N zoCIBnfxU(v>BCwp7SRRp1QQl~B-6GpQ6O=lFVh>YwMba~4#y6q+lOXdq0_Waz(D&C z3TJw2yGW}C(LeH!<$NhZ(K^X`YrePFIU#vNBGuTplg`jqR9<;bQwz}E3FX?^E}Lk* zN-2AMtK;m4oWGgpUnJviJ2Xb7;)Hz;7HgpL{Uw8U;)6+J!ldmd_7=`{%QO-2)_`ws zl_M&)Cb0$O8V9c!-AYedOM8;anDEFf=7|_+fd-wO!QXgff}FJlfc8Q(bU!Vp)A`L_ z(^N(jr#W>T6-|*QNZ7(Oto1<5d+*ak(WFbDUbzXywD^E~&*q)Ul)*Fdxq$eOxM#gl zYfH_-quBLC#Pg%VJx$F6y6@qzqjzS%Ji~eypB-E=d)+7Kv=wE3vPCSK=gpq6C}=pU zDr)4B*xs+<>wI#&;)CN^{_ZJ7c)`Nu7?ZKqOVSC>UHnx^_1bRsVEMuQy^ zN)hoRZ%&O-sGkP%v6d6DuQ zvkbIN3*O&xlH8R*zQK1-Pfs_(K#`NYe7fNM zDCuhtPt=Im2Qbl%qodGaA+bV*@|Y-f0O(sAjoMtYY%}N^Q98aEbeLE0yR#0aApM(v z)NB;gYoRS&gH)p~dO~rxC|!>3&ecg)DZ`SHS+Lm|Ac6Q|&Gp14}-G>UIBjq2b&T@90oxAKtGBN>>*T KXM$76`M(3$@RnBq literal 0 HcmV?d00001 diff --git a/apps/website/screens/components/divider/overview/images/divider_weight.png b/apps/website/screens/components/divider/overview/images/divider_weight.png new file mode 100644 index 0000000000000000000000000000000000000000..9d4a991f80a6cdb9ef1321c010636c1a68173c3f GIT binary patch literal 10446 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 ymB>Ql`>~74JAWVABCM)Zj#mi-+1h`x&D76jP -
- Divider orientation design specifications -
-
- Divider colors design specifications -
-
- Divider weight design specifications -
- - ), - }, - { - title: "Design tokens", - content: ( - <> - This component currently has no design tokens. - - ), - }, -]; - -const DividerSpecsPage = () => { - return ( - - - - - - - ); -}; - -export default DividerSpecsPage; diff --git a/apps/website/screens/components/divider/specs/images/divider_colors.png b/apps/website/screens/components/divider/specs/images/divider_colors.png deleted file mode 100644 index 17afceffd4a9283d2a5f9c4be8716b26a1d7edf7..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 7097 zcmeI1_g7Qd+Q$zJsKL45i!#?ju>ndIbm$OKN2LT12)#+@5L!ff0tn-bA}B3DfXE2J zgf1oYAdG|_hi)jr8z4fYhGIfU-Y|3D_ow?G+*xO3@8s;Ya(4E9_VfLIp8RTMaqk~u zXT<;j_=m~;JJta3T`~X&-8^iUPnn3zIv>woyW>vqP^=4U8X|zgv9J9*LLo5c=z?8Ii03 zY5<1-Q3v3!tD;^+CAXR;R>;oyEe7Ws^R2mn@v9$%@8#kEb--hCN+~}R{<$?HO4HY7Ta}ST zs44)M*Un4`XDtm~O)b!m3>H(4E90PYrP{~aYfgDlz`J?K`#F2O~r+!152z? z{5Ws8P=B8`J!aX1Sfw_=c1}tiW41{i)86T}tT_q*q`ZiaQ?a{WKiRKW-gfipS*?6B z!;58Fy(3mxt&-gAw{|BkgoMb5?a`c%=C?=a>=V}8h~g=+)4dv_>y4Vj+hAGn`p~{K zxyehW1-I_ghFRbemlapVnT#4{*#7P+e)d6?C=DBXObD2Agi@_d252!QXHPM&U4vF^ zwNSHd)7EGtFtm89cWiL$%O7v>XSKEMNI50p+E`g9sm6S2ZfyxRwX!52yWa(JVThsI zqhqKUUp9pE$F#=mtlBz+>lAnce`Vr6jxh}$=LkLX%c_9Ei*JhdnydrZCO0$)f zb?&D88sloCSng@}z8Dv#mQn(-_8v^qqtBvs!QIZMDUK1Df*@ZcFUWF)dKuajcWTUbsZv(@iXSpC%5>EgLg_m6} zhmMbR8BoAmj8PRdE>fZC@)fU^1qIM?{N++t=+KIT22y){=(anKfYZ~lyD*?-V}!oZ2f+ye$FLb35Op0IA_!xeIpTyHrx$dsYe;uU)*nv0TCFMU=ozDDk2#em7f%+i zzI=a7bG3HN^9KDOG0f_8s%^dG-K9Osi|6ADA-4wFAj0cmxbWbN+RIZ4B|d}EMFhvH zz@qd$zu-4(^n!B8A~BoUR=>=Bu;*b8HhaD?w*3GpEA{6g2yo=pg4NtI&euUaOuzKS zd*%5!VX_r(Tu#0WKpoz8jHr!%FHt@y|2@tXcV+mtJCsV;$`!RC{FcWXZTunXSCRU9 zygz|$aDYmOD_R#;hz5#J2miJzrvy;S{&dW?LHvIB<)h80-uk>xj>zSw2O zaVmRk<_QO1Q&f4&`X9Wx$yb-Az5^0uD!%Kf{~V=d?9T5-aWE*KG)%c%y-sK+lCY2!N!q-2uKGE#O~fyt`VHsh8Tok z+C%h+n`arh^oXG*mh+3H$#@&^4klQS4>?GsTY{%u0+AIq>_d+reVd?opJ?g@FXx%$s}Zc4d}Ww?kPk-*az|X^0WX@iwPm4TcFfkTk2cF7yDNzV7?2SK8Cj`-&?0u4;SdxePc5y*fKh;DGY`( z@ONHivL2+x3%(_UW8PYiHET`XU!5k7!g!9HvlQRuT=_|LI64hVKBFpAH~f(2yg@&- zUEE!PxRF{S*XK^P$byk=d|sxarJX>(3zAH_{`LHy>NqRb*5bf{7U()!-M#3RO_xQ- z$&k6WPfDj`e>ip$Sf6RWzVlDriP_f3y(iFHUq03OlEmO3&oh&PhucfY8ceM#(;)lo z+HfQ>c$P{MhxwU-m$ldJPrK>)^lfe-jnX$AqyECPg^F_{mK8!esRA* z_B~JGy-HWICdaEvsM$&*4S|!mdpMsQbC!98zgm1LwiN#h0vd*~Z_&)z&aBP0t+f8B zVmX6tK)xSQS%R&{n|`jceo?XF2xT_n4JMkvNNy7qitAK^{AftXN3L}AktF^SlEKAS zRJzmv3+WgmttI~IHo(f;&Hx4$*a_$g0a}P6MAU66k;3MXJ=)G2AW$h%Fw%+n2 z&N@?7Qu+nk1rhR*?bvb?9TL;}Q|qVY?|3Wu%QkC)BBP69PmhKaO=b;30#ciYTd7M< z!IviAtko^7f5r;@<<$E_Ll*l!An~QhbCI^_DbxFd?cQ`l-)Qv<7oqQBz!$Dv(AcY! zcPL4>6+5YA<|g-po@Dq4KMFj5h3wi=t)AGB%yyBV!;G_RH!hCXg~j-!6qkOy(b$(YVtYhe zb?IH@`WdHiS$dahwCh7eRTae{k1L2(?Nv!>8&_#LSm?R^{=HFqRqN|$d@T%2x23&( z<{|rIM8wrQ6BmD^zaeyTU6cf8;Ok}MYMhTk++sBR`8B8fjNF?UHQ^t(duK>!5ArwjFV4K4)R7maya&5yt{ReQbT2hXKqls6Qz7TZ(H8zZl<0z5jfS8*CY z(_N}JJ92F%dYfYNkG&`+mX~T*+Hh!NUf&6dvk=50#f$>jD?8p&K3SQ z%a^(KOIo4{>z}~Wd2L}RjfQr zKfs-hm|G-f=G zqyFHj25mYGHX}8oE0yw>!HEjz`p~x5MwhsJ9Da#qd*0G>`q$*odgyLDj&ylm^W8JI zRSOWdF!wXJhg+4>?rFGpD!}sX&#)T~v)tDbf@y=8kE&HhXeRV03G3_+w)`Id*PsAa zXog3Q)=`MMAwlH5la9P5k1fc>**$GTRmEjWZz3w#$fpSU_GHUF#7uXnb3^CA)Z|Ee z!gOy)(Y?OrF+(iZuz*^=6D$PG|6*Ne8gcb~NP&Vw@uhVvEgaSAv>HD8SR|sNHYU<~ zW$GwYR^l8@;gj7(*kcJ9(#1o!^KX4VN0d9%XVRpq=5(^b{?ewtq<}_r8p8&D{ff0e zUNbgvqV-6V`I`zUUAoTb*~FnkTu4*h+mRRX(es7i%})%*M<1P)AXchaWppr+%_Mrg znaxk^?B=H@0N^zqRUs%e_?ZaA9`G~$yZw(Vkg)zmkQSA{K?|wQ&W9Sbz-BSZDOj*N za`zCdtK8aK_?+=_dz<~H(9c~foE;`DPO*4xd9-YlW`)M?#VG z5KDsr&Xz?6c|EzXw)p+WdT8lLH5lrEvvZ@0#h_FN&$cv7EeV9v1}uO(^2%I$EG^aW zfWajU3AB@RCZwUS`S%y+v~jTE=>;bowpTakY$P?Fz2(h`Th3>}-U{5=#3T-G2e)C0qAaLLd* zqfZk56AE%noe4&Gr^OIMYv^-xWAlhB)#a`xQdgk_+jm=U#cT{>w*3gbL#5T*HZ~`T zGBB?eUoVwqMVK<)!CT4e-&8JjJ-f9Y&$DnMB+_jMrBQLNqxM+C*vIqrh1W&;!vpueG>Q!WRHQAMc+Fa$<`8v7OFKekB-NJDQiA zn4BxpG4n?2$jd+Z9DPstHcqdn8NtAHFl;1F-rUNibw8fc8AYYM6{$`xjegr7D|I8# zIF}tZqJS-2sQ<&fbnxJ3kXth{y6B!4$J?+PUw+0Wja2UkNtqQRnZbsb1-`Q+;&R;9 zw9J_00uka@fkgLY0T?E>HYA`seUBnVDn;@4X@5dH1;wjdxw6+}h~!40igQG=Tjb#1 zJA-ruwvA2j%-)j}ck762=Kl%rNv5Jrw(lelMc#HizdYf_?kl<)lp^V%T(PijEu{vl zFluylS-RHXV7AsByD|U%5mJ|uYWR>~`*O&)dH2k1=-djI07-IEy_ktG@iU_}I6xM7 zeImmFnKTW!QWG?)d|x3@2$PDha_98(g6ZYaccLN3z)Euh# zPecH26zkao-Ycwt>Ivd6lmt{?^KYtuScVHryRdu>FRt*tjCUzzGY*+WphBl02}MU~ z0hyuM6y;v|nnkW;iJvEH{Cccg`s|*xi5OGO!K3&}esl zh_7J<4@fMkT~D5_H=(_{iJ>pxez1|0_Cac z8r^M1Rd?OF{IR53ERw#rq?~*=KC(hQ2abzVgTM`zm(xH|ARk?#ORE9pO=DIsYZKX5 zfao zLL46PnoN;rBDG>LkQDt<*E{@3j@8S~T9Xd+>sKDHNFYOc*JWLvG5PIlO*x7n75(#x zD^ANUs*=RQ7eih3Ek1;q^t`glO30?$-Xz5CZnfNc4E1325Q2u`_#qvc#$otem0LQa zZJAg>hjZZMy;1VW4q@d2_^H^R(f*S~K#V7j4{x0^qr&T~{Rpx6Ao=eV3>J_L*3bV~ z&;SQl_BPi)j9qg!dyVg>M;XD+n|tID@uJoirac)RnDgj_0>&A{U+nLbh>jLj4+!w_ z3ew$+{%HEL5>Xy&z?dZMdR0(HkuK~Xdt!l0Br^BxxZpSx|A>pmyp5G)o9qIB$59D6 zqk>)ZK+)r!-1R_h8ozq11NG^8_3psHT+A}8gX~5f+7mG_U!5fO>6MtrPt;yd8xNv& zvXMw#V!fjtR=)hw*V{U4y19Wh;)&;`7xkoX;Nl_;i1m4VaTcQdK!hAv5Vk?gkB4->bQEM z2csQ=qp%8NO0d!AD{3BpR9JaKwK{k`p98B<4&En2bR4M(hM$*ev@p{0Cvfn>$h2mE z*8Vm+@X^QI5li9CDIb6Ox6PTY`!5UJ_v6$BB|j`%SN>WWiEfQyhZHiR)3FR&9!&7p z1o@?Zf#V&VU8_pok=&mS%L1c9f!>1g?_zn(Rsp=31^GyGu1z z_155&%Er$+6%fG>hf_CT4z@>t1lWLKd^2(N_3PTo?xeeL6~1B6$*r`rBB*3Rg`knq z2uaY#YjIB>rarQrvqgzmZv19|P!9F1=Ol1g3J@K3py~QwJOO%JslbT> NCO=u+sk-Hn^uGX)RBr$P diff --git a/apps/website/screens/components/divider/specs/images/divider_orientation.png b/apps/website/screens/components/divider/specs/images/divider_orientation.png deleted file mode 100644 index 369bab514f98222a5163a941be0dcbba93767746..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 3431 zcmds3dr;F?7QRuSL9kMBs%%moMM27&07=C1Qb8O^6_vsk!4@PSNWg#+U=0XU%E+UX zXLx0&jEyai7=lG0kRat59t&{_2qe6cpEN*_01*`+d%y_5)yV1^_U3xRx4Oc-ZhreQ3v?4I~1fqrbahpseDE z8iW!3ygfnv5OPs1Xy843Jpf?j=_o$c1VC5ebK2u_B5ZkjIZhuk?4A{7v(3LX_R;k5 z()?lfOxu_GuVts1_*#gMj}pz+jyZd4A?;)dgAoV04gTR@sa6PrCyo44wUvibsx|;W_7w-XaF9=i^U-ZX#J#32n0ah$HkKi8Ro)T{r^-YXf@pCx?$_vC0rbrV5=qX)N@VFH!WYj_RL zmIEP;2lvEy-;wYum9OUW7Fi!Atw*%n-Pw*GSr|4WdjZ8TkM@z9yk)+>$Wmk-`@RQU zkh-+td+4r(Od_BHOlx|2`r?)p@~%qWT6( zM10cAxvqSu`@BjimzbwYzemF$n~}mIrFe`^Ga@VES{qawVpB(g)h0?$pQ zATBs*(=Uh5r6?q70~Wh-qe*;3KaaM-B@8ujjT znj!IrAlDW0Jsr zue^&Ag++Zf@NA%!CkhLDH{1;GDoUWRDRm@jPo5EhT>>3UrOb0>M%@m$vTp;u_?A>* z^RaDiPbNh)HP5+>ZAB#3|9+^T)S z9C>G=;H2C2b%;vl#~jV}=HF>&Z9UGJhzO*Q_0&UL==_q9*-ny%%bVNfE3L~~y@}I` z_-`1s4DV!(>#q3X{4o)+x$o`Ri;C6G1Cx}d!V3tgE$ZgLx;+~rIyB5%qfXGdV#r0{ zfRY|TIXdu4Xmb!ARe;Jw$(iYKy$wuO#!RHxAoWsR8j+dRlAuH!-rKp1VQOu41uI-@a7yr zo)Ao>e$sBk=A{JAC$#p;3CrMcEv+2$!+W4;1GhbRI{nzXsp z-~^7Dhuq;R42d>*>TvChhqx3{v5OJ&Hn-yKQAs5eZpGs5Q`bJer#CbaX(`-V^rE%d zSgM2;#rVKJXnnMIk=B{WE^xM5<5L@0&C!m>yomi*l$4$|ToMRr%?QB>kSG`0Q(Jn| zQ0<__%XxcTUr3d|ig7DvHZwfVwX?Jdd*vBRbI4Qg>0xL8HS_nd+{ejAmI%9M{z6}Y zxr^$&YbP{bbFw~bAb2fE2W7Y!u=nsFCi%0efnzSM^}%i1N;xHp(j?y49uFmb-qq8e zkWMp@I-@C+;ZM+ou-nJrvpNV`p$);skhBu&|I>tfuc3IVE~fe8r06Ltg0r1+s3!Vy z%6BjMSO;vLJMI3S!@l7GE8`T?bZmknisV`%l|VZ(j_BchB>D>jW-^vA&CyXe$qc$X z&ZmEb#kiPXB;OE^HK{5jS^O)`y4{s4#SI-_3Wc}_q3I^vzRC;wdHCt-51rjb2uoAX z9->t6*38#^PWLFoBrE7f{m77XLL1FKWDIM*A7}pJKwpxvq%EjhQJWiASxwTZ_=hQH zyN0L3=T45LF68ges8}KWD8_Yveirv>OZ?(!eh-}U10Dwr1Vao~^yLcS`lv~Ak93RJ z@5i@ASebhDI9Zci(bZeyhz~%D4<*uc%E6^XzzsQ-Pbnvr1eUAmyVyCPWJ#VVB}W4{ zZyAto;z9>?afPDeqEZOk#k!=fL#3kjOP$U}SDxqDv4GC)E^Hx&v#! zEiKQeOc3R`q$}A}mzxG6>s7|Bv5+P%L6(cqVt diff --git a/apps/website/screens/components/divider/specs/images/divider_weight.png b/apps/website/screens/components/divider/specs/images/divider_weight.png deleted file mode 100644 index c86271dada268b05350546a28527c76e4c26fb34..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 3495 zcmd^?dpK0<9>>>|%9uh#5k+ZA(M+znU$)!_G32t%h{ohPAtcNsWLKi1aW}hNMwCm< zxQx4TN^V<-DNI6UDtFojGsao=K7X9^Jm-(|?|#l7>+-(qeb@W@zR&u7e&2Q5$-!!m zn7kMO0DEk#Et~;hdlGp6tLRSfjL!S*7I=YPvG#}n0GRaF0ReLJ4}hJJ2xlvEp!|1* zZ(u_NZ-z1hfS2ho!Nncmn+$C%%+S{$vusqV>y+HCh3Hau$SF;DS&26=j2eKOPB_EV zuE2r=qg%?oAt?8&E=s7nFvyEx#Y+0Y)~B#Yh()yT4T~%>wfC1jccDd0ig~286uk(! zt4&Ip%R*vD$7sadTCIa6d^4ty7jFgMxfTE5nhgYu+;*EX0GJkum;=BKTj-XUM^d8T zgOkT3w}Fyul|%sGS*EEd063{8NP-ib|JD;qcENTVES&e~$6RXwwVF62|5r_FFjl#D zkd6;$YhTF8e(hDJ1EXmF-%WUy5*ku$|Xfn_QQQaLoafc zJdRM#A9(8KY02P82{8hC+3qIcIllhmD^s7_=Q$Rt2#M0WBc!1@?&@>hxkE_EjdLY1 zVmuV{(RuF-VI#D#Cr?**92t_w)-I9dtj0}Ypx6EU{7`n6JzeVWd`XXwdX{YZwvjh? z!DTz9X7kIPsLfe3+(JgHkn(1jC#3+najYWmvcIqIM4EcW?-sf_cGXF*ld9^Z2TWk#s0e%I9fBj-l84W63O;X@5l zRt()xAR@fxMo25ku>E34o8P)dlwp(9K=qEiFRiN?`j?;%;?HAYA(CAO)b}jAOz#Z?`$(78` zv7+Hhe#swGSAD>fIAnM&*3f4z1DXAOlC83vlPl8wbA~!^+S4^*=&eO=?c@0tHN4!c zU3Qlvx&|4q8+4h8ZFE-LXF3`mI}>q)Q6GQBjgj^pfIEf?yTm@*Tz^kd;gIfGmJ?p~e62ykeLi<6IWR%KT5& z=zj9@KN5=sE5${rMowV)dfls^)Q#QtnbJPYqQrT1x=1`)`pzwChHuBrNpu?ySc?T1wv}FI6l$rwIsGW*#`Zt%DKR>RtbFnQ`@-Geq{Vj5%j3 ztGNV+Inn}3bu!U*9I?v;Gao-#{h(YSAl-;o7hka4I~LeW3OuLkXslKB+iHrHUCgxG zK`k)%XNRkTrarv%o0@oiw`Uqm!OSg=%CxqnNMvo%AH@1t`MyJX;ZO5H(Cd-rKQ;E~ z#WaEi=T#7^oKyJGBy7Thas7`#+8C)KmLuHYcP&n~=i#}Z1`77a%zx>~nCg6Vs%M#Y z&KO%Lp)CzkaPBa3ZP=Np`Fy#ni-KZ1!UC#ATHbzO(jQQLSJ(H4DB15=9B&mK#L^+* ztPe_pc=pb>#fMK%u@aZD!iMhG=JAICA9!`}N9VwrfC1`OwSxb0Y}LE=%HtAIj{8+* zHNN+O`na`l7d?AxyVWjU7$~wQw%DQIq(Sstu=&)=>`0!|7L_@piMu3pxGIuxB*%R& zZ+U4ZKZ}3tswIZNuB&34rXcvxhtQkQawjlFl51k=dx+jjsUl2zW>kBwt(WUJR(LJ$4^w5W(r51wLdckw5ErPn~9!dC;hgYD9v1YdI|P zWy~@M{$VP}B#E0-BDJEZfA#B1RmpD7M?G1F4$08r+CGk%($8+PGl#1-$NOH6+~Lr0RDto5ihsiT2KFe^B=S-ZVuW587?H6g{M!jer?Tw9vZ3sU=1 z+Wd&k+)pKjDdfCl)|y>Y9k5zKl= z4G0Q(DN&bkyCTBI`X4C%<I&Nf1&lvS6iVP*^KVbA5n%G9@hN9 zX7Kx}(;f9)_Y3#-*Xyy+rG?;=U9JtwI1t7a^lR{EMcTCHF$ru;fuCkc=ds;XX0}fb^ip`pTuvuO zH{)Bd3AQ?kNw13PweI>F{QO>}0u)>+LC(QEVx8uUVVq&WFCL%X8x?YHG91FU6z~-ETMY*}p&3^*&P1tGx diff --git a/apps/website/screens/components/divider/usage/DividerUsagePage.tsx b/apps/website/screens/components/divider/usage/DividerUsagePage.tsx deleted file mode 100644 index 2f3bcd27e6..0000000000 --- a/apps/website/screens/components/divider/usage/DividerUsagePage.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import { DxcBulletedList, DxcFlex } from "@dxc-technology/halstack-react"; -import DocFooter from "@/common/DocFooter"; -import QuickNavContainer from "@/common/QuickNavContainer"; -import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; - -const sections = [ - { - title: "Usage", - content: ( - - Use dividers to separate content into distinct groups. - - A divider should be visibly noticeable enough to divide a section but should not be so distinct that it - attracts attention away from the content. - - Use dividers to create groups, not individual items. - - Apply the use of dividers in the right context. Determine when it is appropriate to use white space and when - it is better to use a divider to separate content. - - - ), - }, -]; - -const DividerUsagePage = () => { - return ( - - - - - - - ); -}; - -export default DividerUsagePage; From 217cf9fb846697c1690c82568b09fcf084f033b5 Mon Sep 17 00:00:00 2001 From: Enrique Moreno Date: Fri, 28 Feb 2025 13:57:01 +0100 Subject: [PATCH 3/4] Minor changes from review --- .../screens/components/divider/overview/DividerOverviewPage.tsx | 2 +- packages/lib/src/divider/Divider.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/website/screens/components/divider/overview/DividerOverviewPage.tsx b/apps/website/screens/components/divider/overview/DividerOverviewPage.tsx index 5725042be0..527edcf024 100644 --- a/apps/website/screens/components/divider/overview/DividerOverviewPage.tsx +++ b/apps/website/screens/components/divider/overview/DividerOverviewPage.tsx @@ -112,7 +112,7 @@ const DividerOverviewPage = () => { return ( - + diff --git a/packages/lib/src/divider/Divider.tsx b/packages/lib/src/divider/Divider.tsx index 4b1abc4e9c..c0e328d1f3 100644 --- a/packages/lib/src/divider/Divider.tsx +++ b/packages/lib/src/divider/Divider.tsx @@ -26,7 +26,7 @@ const DxcDivider = ({ weight = "regular", color = "mediumGrey", decorative = true, -}: DividerPropsType): JSX.Element => ( +}: DividerPropsType) => ( Date: Tue, 4 Mar 2025 09:09:21 +0100 Subject: [PATCH 4/4] Update DividerOverviewPage.tsx --- .../screens/components/divider/overview/DividerOverviewPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/website/screens/components/divider/overview/DividerOverviewPage.tsx b/apps/website/screens/components/divider/overview/DividerOverviewPage.tsx index 527edcf024..ca79e3f921 100644 --- a/apps/website/screens/components/divider/overview/DividerOverviewPage.tsx +++ b/apps/website/screens/components/divider/overview/DividerOverviewPage.tsx @@ -112,7 +112,7 @@ const DividerOverviewPage = () => { return ( - +