Skip to content

Commit 370691b

Browse files
kukockukoc
authored
Merge branch 'master' into jialecl/button-icon-doc
2 parents 2c7b428 + ead0374 commit 370691b

File tree

7 files changed

+18
-58
lines changed

7 files changed

+18
-58
lines changed

‎lib/src/accordion-group/types.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export type AccordionPropsType = {
1313
*/
1414
label: string;
1515
/**
16-
* Element or path used as the icon that will be placed next to panel label.
16+
* Material Symbol name or SVG element used as the icon that will be placed next to panel label.
1717
*/
1818
icon?: string | SVG;
1919
/**

‎lib/src/accordion/Accordion.stories.tsx‎

Lines changed: 4 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -9,24 +9,6 @@ export default {
99
component: DxcAccordion,
1010
};
1111

12-
const folderIcon = (
13-
<svg
14-
xmlns="http://www.w3.org/2000/svg"
15-
enableBackground="new 0 0 24 24"
16-
height="24px"
17-
viewBox="0 0 24 24"
18-
width="24px"
19-
fill="currentColor"
20-
>
21-
<g>
22-
<rect fill="none" height="24" width="24" />
23-
</g>
24-
<g>
25-
<path d="M20,6h-8l-2-2H4C2.9,4,2.01,4.9,2.01,6L2,18c0,1.1,0.9,2,2,2h16c1.1,0,2-0.9,2-2V8C22,6.9,21.1,6,20,6z M16,16h2v-2h-2v-2 h2v-2h-2V8h4v10h-4V16z M16,16h-2v2H4V6h5.17l2,2H14v2h2v2h-2v2h2V16z" />
26-
</g>
27-
</svg>
28-
);
29-
3012
const smallIcon = (
3113
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" height="20" width="20">
3214
<path d="m7.646 18.333-.313-2.625q-.208-.125-.458-.27-.25-.146-.458-.271l-2.438 1.021-2.354-4.063 2.083-1.583V9.458L1.625 7.875l2.354-4.063 2.438 1.021q.208-.125.458-.27.25-.146.458-.271l.313-2.625h4.708l.313 2.625q.208.125.458.271.25.145.458.27l2.438-1.021 2.354 4.063-2.063 1.583v1.084l2.063 1.583-2.354 4.063-2.438-1.021q-.208.125-.458.271-.25.145-.458.27l-.313 2.625ZM10 12.979q1.229 0 2.104-.875T12.979 10q0-1.229-.875-2.104T10 7.021q-1.229 0-2.104.875T7.021 10q0 1.229.875 2.104t2.104.875Zm0-1.75q-.5 0-.865-.364-.364-.365-.364-.865t.364-.865q.365-.364.865-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.854 6.583h1.666l.25-2.166q.605-.167 1.167-.5.562-.334 1.021-.792l2.021.854.833-1.375-1.771-1.354q.104-.292.146-.604.042-.313.042-.646 0-.292-.042-.594t-.125-.635l1.771-1.375-.834-1.375-2.02.875q-.48-.479-1.032-.802-.552-.323-1.156-.49l-.271-2.187H9.167l-.271 2.187q-.604.167-1.156.49-.552.323-1.011.781l-2.021-.854-.833 1.375 1.75 1.354q-.083.333-.125.646-.042.312-.042.604t.042.594q.042.302.125.635l-1.75 1.375.833 1.375 2.021-.854q.459.458 1.011.781.552.323 1.156.49Z" />
@@ -98,7 +80,7 @@ export const Chromatic = () => (
9880
</ExampleContainer>
9981
<ExampleContainer>
10082
<Title title="With icon" theme="light" level={4} />
101-
<DxcAccordion label="Accordion" assistiveText="Assistive text" icon={folderIcon}>
83+
<DxcAccordion label="Accordion" assistiveText="Assistive text" icon="folder">
10284
<div>
10385
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
10486
lobortis eget.
@@ -123,19 +105,6 @@ export const Chromatic = () => (
123105
</div>
124106
</DxcAccordion>
125107
</ExampleContainer>
126-
<ExampleContainer>
127-
<Title title="With bigger icon (image)" theme="light" level={4} />
128-
<DxcAccordion
129-
label="Accordion"
130-
assistiveText="Assistive text"
131-
icon="https://www.freepnglogos.com/uploads/facebook-logo-design-1.png"
132-
>
133-
<div>
134-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
135-
lobortis eget.
136-
</div>
137-
</DxcAccordion>
138-
</ExampleContainer>
139108
<Title title="States" theme="light" level={2} />
140109
<ExampleContainer pseudoState="pseudo-focus">
141110
<Title title="Focused" theme="light" level={4} />
@@ -166,7 +135,7 @@ export const Chromatic = () => (
166135
</ExampleContainer>
167136
<ExampleContainer>
168137
<Title title="Disabled" theme="light" level={4} />
169-
<DxcAccordion label="Disabled" assistiveText="Assistive text" icon={folderIcon} disabled>
138+
<DxcAccordion label="Disabled" assistiveText="Assistive text" icon="folder" disabled>
170139
<div>
171140
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
172141
lobortis eget.
@@ -241,7 +210,7 @@ export const Chromatic = () => (
241210
<ExampleContainer>
242211
<Title title="With assistive text and icon" theme="light" level={4} />
243212
<HalstackProvider theme={opinionatedTheme}>
244-
<DxcAccordion label="Accordion" assistiveText="Assistive text" icon={folderIcon}>
213+
<DxcAccordion label="Accordion" assistiveText="Assistive text" icon="folder">
245214
Content
246215
</DxcAccordion>
247216
</HalstackProvider>
@@ -271,7 +240,7 @@ export const Chromatic = () => (
271240
<ExampleContainer>
272241
<Title title="Disabled" theme="light" level={4} />
273242
<HalstackProvider theme={opinionatedTheme}>
274-
<DxcAccordion label="Disabled" assistiveText="Assistive text" icon={folderIcon} disabled>
243+
<DxcAccordion label="Disabled" assistiveText="Assistive text" icon="folder" disabled>
275244
<div>
276245
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
277246
leo lobortis eget.

‎lib/src/accordion/Accordion.tsx‎

Lines changed: 6 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,7 @@ import useTheme from "../useTheme";
66
import AccordionPropsType from "./types";
77
import BaseTypography from "../utils/BaseTypography";
88
import { v4 as uuidv4 } from "uuid";
9-
10-
const expandLess = (
11-
<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" fill="currentColor">
12-
<path d="m7.4 15.375-1.4-1.4 6-6 6 6-1.4 1.4-4.6-4.6Z" />
13-
</svg>
14-
);
15-
16-
const expandMore = (
17-
<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" fill="currentColor">
18-
<path d="m12 15.375-6-6 1.4-1.4 4.6 4.6 4.6-4.6 1.4 1.4Z" />
19-
</svg>
20-
);
9+
import DxcIcon from "../icon/Icon";
2110

2211
const DxcAccordion = ({
2312
label = "",
@@ -57,7 +46,7 @@ const DxcAccordion = ({
5746
<AccordionLabel>
5847
{icon && (
5948
<IconContainer disabled={disabled}>
60-
{typeof icon === "string" ? <img src={icon} /> : icon}
49+
{typeof icon === "string" ? <DxcIcon icon={icon} /> : icon}
6150
</IconContainer>
6251
)}
6352
<BaseTypography
@@ -96,7 +85,7 @@ const DxcAccordion = ({
9685
)}
9786
</AccordionInfo>
9887
<CollapseIndicator disabled={disabled}>
99-
{isExpanded ?? innerIsExpanded ? expandLess : expandMore}
88+
<DxcIcon icon={isExpanded ?? innerIsExpanded ? "expand_less" : "expand_more"} />
10089
</CollapseIndicator>
10190
</AccordionTrigger>
10291
</AccordionHeader>
@@ -190,9 +179,9 @@ const IconContainer = styled.span<{ disabled: AccordionPropsType["disabled"] }>`
190179
margin-left: ${(props) => props.theme.iconMarginLeft};
191180
margin-right: ${(props) => props.theme.iconMarginRight};
192181
color: ${(props) => (props.disabled ? props.theme.disabledIconColor : props.theme.iconColor)};
182+
font-size: 24px;
193183
194-
svg,
195-
img {
184+
svg {
196185
height: ${(props) => props.theme.iconSize};
197186
width: ${(props) => props.theme.iconSize};
198187
}
@@ -208,6 +197,7 @@ const CollapseIndicator = styled.span<{ disabled: AccordionPropsType["disabled"]
208197
display: flex;
209198
flex-wrap: wrap;
210199
align-content: center;
200+
font-size: 24px;
211201
color: ${(props) => (props.disabled ? props.theme.disabledArrowColor : props.theme.arrowColor)};
212202
`;
213203

‎lib/src/accordion/types.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ type Props = {
2323
*/
2424
isExpanded?: boolean;
2525
/**
26-
* Element or path used as the icon that will be placed next to panel label.
26+
* Material Symbol name or SVG element used as the icon that will be placed next to panel label.
2727
*/
2828
icon?: string | SVG;
2929
/**

‎lib/src/button/Button.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -224,8 +224,8 @@ const LabelContainer = styled.span`
224224

225225
const IconContainer = styled.div`
226226
display: flex;
227+
font-size: 24px;
227228
228-
img,
229229
svg {
230230
height: 24px;
231231
width: 24px;

‎lib/src/icon/Icon.stories.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,13 @@ export const Chromatic = () => (
1313
<>
1414
<Title title="Icon component" theme="light" level={2} />
1515
<ExampleContainer>
16-
<DxcIcon icon="home" />
17-
<DxcIcon icon="filled_home" />
16+
<DxcTypography as="p" fontSize="1.5rem">
17+
<DxcIcon icon="home" />
18+
<DxcIcon icon="filled_home" />
19+
</DxcTypography>
1820
</ExampleContainer>
1921
<ExampleContainer>
20-
<DxcTypography as="p" color="#b182e3">
22+
<DxcTypography as="p" fontSize="1.5rem" color="#b182e3">
2123
<DxcIcon icon="home" />
2224
<DxcIcon icon="filled_home" />
2325
</DxcTypography>

‎lib/src/icon/Icon.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@ const IconContainer = styled.span<{
1919
font-family: "Material Symbols Outlined";
2020
font-weight: normal;
2121
font-style: normal;
22-
font-size: 24px;
2322
line-height: 1;
2423
letter-spacing: normal;
2524
text-transform: none;

0 commit comments

Comments
 (0)