moving icons to Icons.tsx

dxc-technology · Jan 30, 2023 · d7154e4 · d7154e4
1 parent 5d19fb9
commit d7154e4
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 36 deletions.
diff --git a/lib/src/date-input/Calendar.tsx b/lib/src/date-input/Calendar.tsx
@@ -1,4 +1,4 @@
-import dayjs, { Dayjs } from "dayjs";
+import { Dayjs } from "dayjs";
 import React, { useState, useMemo, useEffect } from "react";
 import styled from "styled-components";
 import { CalendarPropsType } from "./types";

diff --git a/lib/src/date-input/DateInput.stories.tsx b/lib/src/date-input/DateInput.stories.tsx
@@ -176,7 +176,7 @@ DatePickerStates.play = async ({ canvasElement }) => {
   await userEvent.click(dateBtn);
 };
 
-export const YearpickerStates = () => {
+export const YearPickerStates = () => {
   const colorsTheme: any = useTheme();
   return (
     <>

diff --git a/lib/src/date-input/DateInput.tsx b/lib/src/date-input/DateInput.tsx
@@ -9,15 +9,9 @@ import DxcDatePicker from "./DatePicker";
 import * as Popover from "@radix-ui/react-popover";
 import customParseFormat from "dayjs/plugin/customParseFormat";
 import { v4 as uuidv4 } from "uuid";
+import { calendarIcon } from "./Icons";
 dayjs.extend(customParseFormat);
 
-const calendarIcon = (
-  <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="currentColor">
-    <path d="M0 0h24v24H0z" fill="none" />
-    <path d="M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z" />
-  </svg>
-);
-
 const getValueForPicker = (value, format) => dayjs(value, format.toUpperCase(), true);
 
 const getDate = (value, format, lastValidYear, setLastValidYear) => {

diff --git a/lib/src/date-input/DatePicker.tsx b/lib/src/date-input/DatePicker.tsx
@@ -5,33 +5,7 @@ import { DatePickerPropsType } from "./types";
 import Calendar from "./Calendar";
 import YearPicker from "./YearPicker";
 import useTranslatedLabels from "../useTranslatedLabels";
-
-const leftCaret = (
-  <svg fill="currentColor" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
-    <path d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"></path>
-    <path fill="none" d="M0 0h24v24H0V0z"></path>
-  </svg>
-);
-
-const rightCaret = (
-  <svg fill="currentColor" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
-    <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"></path>
-    <path fill="none" d="M0 0h24v24H0V0z"></path>
-  </svg>
-);
-
-const downCaret = (
-  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <path d="M7.5 10L12.5 15L17.5 10H7.5Z" fill="currentColor" />
-  </svg>
-);
-
-const upCaret = (
-  <svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
-    <path d="m7 14 5-5 5 5Z" fill="currentColor" />
-  </svg>
-);
-
+import { downCaret, leftCaret, rightCaret, upCaret } from "./Icons";
 const today = dayjs();
 
 const DxcDatePicker = ({ date, onDateSelect, id }: DatePickerPropsType): JSX.Element => {

diff --git a/lib/src/date-input/Icons.tsx b/lib/src/date-input/Icons.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+
+export const calendarIcon = (
+  <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="currentColor">
+    <path d="M0 0h24v24H0z" fill="none" />
+    <path d="M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z" />
+  </svg>
+);
+
+export const leftCaret = (
+  <svg fill="currentColor" focusable="false" viewBox="0 0 24 24">
+    <path d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"></path>
+    <path fill="none" d="M0 0h24v24H0V0z"></path>
+  </svg>
+);
+
+export const rightCaret = (
+  <svg fill="currentColor" focusable="false" viewBox="0 0 24 24">
+    <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"></path>
+    <path fill="none" d="M0 0h24v24H0V0z"></path>
+  </svg>
+);
+
+export const downCaret = (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path d="M7.5 10L12.5 15L17.5 10H7.5Z" fill="currentColor" />
+  </svg>
+);
+
+export const upCaret = (
+  <svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+    <path d="m7 14 5-5 5 5Z" fill="currentColor" />
+  </svg>
+);